import React from 'react';
import {
  Row,
  Col,
  Card,
  Icon,
  Button,
  Input,
  Form,
  Checkbox,
  Select,
  Modal,
  message,
  Badge,
} from 'antd/lib/index';
import axios from '@/components/Engineering/axios';
import style from './index.less';
import { GridContent, PageHeaderWrapper, RouteContext } from '@ant-design/pro-layout';

const FormItem = Form.Item;
import { decodeQuery } from './utils';

class Apply extends React.Component {
  state = {
    flows: [],
    userCertification: '',
    queryParams: [],
  };

  componentDidMount() {
    this.queryParams = decodeQuery();
    this.handleGetFlows(this.queryParams);
  }

  handleGetFlows(queryParams) {
    axios.ajax({ url: `${PORTAL_PATH}/api/pj/flows/${parseInt(queryParams.id)}` }).then(res => {
      let content = res.content;
      content &&
        this.setState({
          flows: content.flows,
          userCertification: content.userCertification,
        });
      this.props.form.setFieldsValue({ productName: queryParams.productName });
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
    };
    const { userCertification } = this.state;

    return (
      <PageHeaderWrapper title="填写资料">
        {!userCertification ? (
          <Card
            title={<Badge status="success" text="系统检测到你未进行实名认证，请先进行实名认证" />}
            style={{ maxWidth: 600, border: 'none', margin: '0 auto' }}
          >
            <Form style={{ margin: '0 auto', maxWidth: '600px' }}>
              <Row>
                <Col span={24}>
                  <FormItem label="真实姓名" {...formItemLayout}>
                    {getFieldDecorator('name', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '真实姓名不能为空' },
                        { pattern: /^.{1,4}$/, message: '真实姓名不超过4个字' },
                      ],
                    })(<Input placeholder="请输入姓名" />)}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label="身份证号" {...formItemLayout}>
                    {getFieldDecorator('idNumber', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '身份证号不能为空' },
                        { pattern: /^.{17,18}$/, message: '请输入18位有效身份证号' },
                      ],
                    })(<Input placeholder="请输入身份证号" />)}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label=" " colon={false} {...formItemLayout}>
                    {getFieldDecorator('submit', {})(
                      <Button
                        size="large"
                        style={{ width: '100%' }}
                        type="primary"
                        onClick={() =>
                          this.props.form.validateFields((err, values) => {
                            if (err) return message.err('填写的参数不完整');
                            axios
                              .ajax(
                                {
                                  url: `${PORTAL_PATH}/api/userCertification`,
                                  params: {
                                    ...values,
                                  },
                                },
                                'post',
                              )
                              .then(res => {
                                if (res.resultCode == 'ok') {
                                  message.success('实名认证成功');
                                  this.handleGetFlows(this.queryParams);
                                }
                              });
                          })
                        }
                      >
                        提交申请
                      </Button>,
                    )}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label=" " colon={false} {...formItemLayout}>
                    {getFieldDecorator('cancel', {})(
                      <Button
                        size="large"
                        style={{ width: '100%' }}
                        onClick={() => window.history.back()}
                      >
                        取消
                      </Button>,
                    )}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </Card>
        ) : null}

        {userCertification ? (
          <Card style={{ margin: '50px auto', border: 'none' }}>
            <Form style={{ margin: '0 auto', maxWidth: '600px' }}>
              <Row>
                <Col span={24}>
                  <FormItem label="产品名称" {...formItemLayout}>
                    {getFieldDecorator('productName', {
                      initialValue: '',
                      rules: [{ required: true, message: '产品名称不能为空' }],
                    })(<Input placeholder="" disabled />)}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label="地区名" {...formItemLayout}>
                    {getFieldDecorator('flowid', {
                      initialValue: '',
                      rules: [{ required: true, message: '地区名不能为空' }],
                    })(
                      <Select
                        showSearch
                        placeholder=""
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        onChange={(e, all) => {
                          this.setState({ flowName: all.props.children });
                        }}
                      >
                        {this.state.flows.map(item => (
                          <Select.Option value={item.flowId}>{item.flowName}</Select.Option>
                        ))}
                      </Select>,
                    )}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label="申请人" {...formItemLayout}>
                    {getFieldDecorator('applicant', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '申请人不能为空' },
                        { pattern: /^.{1,20}$/, text: '申请人不超过20个字' },
                      ],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label="手机号" {...formItemLayout}>
                    {getFieldDecorator('phone', {
                      initialValue: '',
                      rules: [
                        { required: true, message: '手机号不能为空' },
                        {
                          pattern: /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
                          message: '请输入11位有效手机号码',
                        },
                      ],
                    })(<Input placeholder="" />)}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label=" " colon={false} {...formItemLayout}>
                    {getFieldDecorator('checkbox', {})(
                      <>
                        <Checkbox
                          checked={this.state.arrageAgreement}
                          onClick={e => this.setState({ arrageAgreement: e.target.checked })}
                        />
                        <a
                          style={{ marginLeft: 10 }}
                          onClick={() => {
                            this.setState({
                              agreementVisable: true,
                              arrageAgreement: true,
                            });
                          }}
                        >
                          我同意服务协议
                        </a>
                      </>,
                    )}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label=" " colon={false} {...formItemLayout}>
                    {getFieldDecorator('submit', {})(
                      <Button
                        style={{ width: '100%' }}
                        type="primary"
                        onClick={() =>
                          this.props.form.validateFields((err, values) => {
                            if (err) return message.err('填写的参数不完整');
                            if (!this.state.arrageAgreement) return message.error('请勾选服务协议');
                            axios
                              .ajax({
                                url: `${PORTAL_PATH}/api/pj/authorize`,
                                params: {
                                  ...values,
                                  productId: this.queryParams.id,
                                  flowName: this.state.flowName,
                                },
                              })
                              .then(res => {
                                if (res) return window.open(res.content);
                              });
                          })
                        }
                      >
                        提交申请
                      </Button>,
                    )}
                  </FormItem>
                </Col>

                <Col span={24}>
                  <FormItem label=" " colon={false} {...formItemLayout}>
                    {getFieldDecorator('cancel', {})(
                      <Button style={{ width: '100%' }} onClick={() => window.history.back()}>
                        取消
                      </Button>,
                    )}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </Card>
        ) : null}

        <Modal
          width={900}
          visible={this.state.agreementVisable}
          closeIcon={true}
          keyboard
          onOk={() => {
            this.setState({
              agreementVisable: false,
              arrageAgreement: true,
            });
          }}
          onCancel={() => {
            this.setState({
              agreementVisable: false,
              arrageAgreement: false,
            });
          }}
        >
          <div className="protocol_wrap">
            <h1 className="pt_title" style={{ marginTop: 10, textAlign: 'center' }}>
              广州市丑寅商业保理有限公司服务协议
            </h1>
            <h3 className="sub_t jiafangname">
              甲方：{userCertification && userCertification.name}
            </h3>
            <h3 className="sub_t jiafangdizhi">地址： </h3>
            <h3 className="sub_t jiafangcode">
              统一社会信用代码/身份证：{userCertification && userCertification.idNumber}
            </h3>
            <br />
            <h3 className="sub_t">乙方： 广州市丑寅商业保理有限公司</h3>
            <h3 className="sub_t">地址：广州市海珠区红卫新村西路29号UP智谷B1-301 </h3>
            <h3 className="sub_t">统一社会信用代码：91440101MA5AM0N604</h3>

            <div className="pt_item">
              <p className="b">鉴于：</p>
              <p className="b">
                1．甲方为扩大业务规模，需要资金周转，现委托乙方寻找、介绍出资方；而乙方亦获知了甲方的上述意愿。
              </p>
              <p className="b">
                2．甲乙双方共同确认：甲方同意委托乙方为寻找、介绍出资方，乙方同意接受委托，双方签订正式合同，并严格履行，以达到双方目的。
              </p>
              <p className="b">
                双方本着自愿、平等、互惠互利、诚实信用的原则，经充分友好协商，订立如下合同条款，以资共同恪守履行。
              </p>
            </div>

            <h3 className={style.subt}>第一条 委托事项</h3>

            <div className="pt_item">
              <p>1.1 甲方委托乙方寻找或介绍出资方，乙方接受甲方委托。</p>
              <p>
                1.2
                乙方应尽力为甲方寻找或介绍出资方，并尽可能促成出资方以出借、赞助、投资等合法方式与甲方签订服务协议。
              </p>
            </div>

            <h3 className={style.subt}>第二条 权利与义务</h3>
            <div className="pt_item">
              <p>2.1 乙方在接受甲方的委托时，甲方应出示营业执照等合法的经营资格证明。</p>
              <p>
                2.2
                乙方在履行本合同的过程中，可以向第三方表明其为甲方的委托人，并可以向第三方介绍甲方生产经营的相关情况。
              </p>
              <p>
                2.3
                乙方应认真完成甲方的委托事项，即，按照合同第一条所规定的内容积极为甲方寻求机会，并为甲方与相关对方当事人签署合同或协议提供联络、协助、撮合等服务。
              </p>
              <p>
                2.4
                乙方在代理甲方的委托事项过程中，因甲方过错造成其损失时，乙方有权要求甲方承担赔偿责任。
              </p>
              <p>2.5 乙方对甲方所借款项不承担任何性质的担保责任。</p>
            </div>

            <h3 className={style.subt}>第三条 服务费</h3>
            <div className="pt_item">
              <p>
                3.1
                若乙方促成有出资意向的第三方与甲方签署贷款合同，甲方应向乙方支付银行单笔授信期限下最终授信贷款金额的
                1%~3% 作为乙方服务费[例: 银行单笔授信期限为1年, 授信贷款金额为50万,
                则需支付服务费50万X1%=5000元；授信期限2年，则需支付服务费50万X2%=10000元；以此类推，授信期限不满1年的，按1年（1%）计算服务费，授信期限3年或3年以上的，按3年（3%）计算服务费]，此费用的有关税款由乙方负担，服务费由甲方一次性支付给乙方。
              </p>
              <p>3.2 若乙方未能促成第三方与甲方签署出资合同，乙方无权要求甲方支付服务费。</p>
              <p>3.3 若甲方未能按时支付服务费，乙方有权要求甲方按照日万分之五的比例支付滞纳金。</p>
              <p>3.4 服务费应在甲方获得银行单笔授信贷款额度的两个工作日之内支付给乙方。</p>
              <p>3.5 乙方银行账号：719869704031</p>
            </div>

            <h3 className={style.subt}>第四条 合同的解除</h3>
            <div className="pt_item">
              <p className="b">发生下列情形之一，甲方或乙方可以通过书面形式通知对方解除本合同：</p>
              <p>4.1 甲乙双方通过书面协议解除本合同；</p>
              <p>4.2 因不可抗力致使合同目的不能实现的</p>
              <p>4.3 国家政策法规调整致使本合同履行可能违法</p>
              <p>
                4.4 在委托期限届满之前，当事人一方明确表示或以自己的行为表明不履行合同主要义务的
              </p>
              <p>4.5 当事人一方迟延履行合同主要义务，经催告后在合理期限内仍未履行</p>
              <p>4.6 当事人有其他违约或违法行为致使合同目的不能实现的</p>
            </div>

            <h3 className={style.subt}>第五条 违约责任</h3>
            <div className="pt_item">
              <p className="b">
                本合同的任何一方违反本合同的约定给对方造成损失的，都应当赔偿另一方因此而遭受的损失，并支付本合同服务费总额的
                10％ 作为违约金。
              </p>
            </div>

            <h3 className={style.subt}>第六条 声明及保证</h3>
            <div className="pt_item">
              <p className="b">甲方：</p>
              <p>
                6.1.1
                甲方为一家依法设立并合法存续的企业或是中国境内具备完全的民事行为能力人，并有权签署并有能力履行本合同。
              </p>
              <p>6.1.2 甲方签署和履行本合同所需的一切手续均已办妥并合法有效。</p>
              <p>
                6.1.3
                在签署本合同时，任何法院、仲裁机构、行政机关或监管机构均未作出任何足以对甲方履行本合同产生重大不利影响的判决、裁定、裁决或具体行政行为。
              </p>
              <p>
                6.1.4
                甲方为签署本合同所需的内部授权程序均已完成，本合同的签署人是甲方法定代表人或授权代表人。本合同生效后即对合同双方具有法律约束力。
              </p>
              <p className="b">乙方：</p>
              <p>6.2.1 乙方具有完整的民事行为能力，有权签署并有能力履行本合同。</p>
              <p>6.2.2 乙方签署和履行本合同所需的一切手续均已办妥并合法有效。</p>
              <p>
                6.2.3
                在签署本合同时，任何法院、仲裁机构、行政机关或监管机构均未作出任何足以对乙方履行本合同产生重大不利影响的判决、裁定、裁决或具体行政行为。
              </p>
              <p>
                6.2.4
                乙方为签署本合同所需的内部授权程序均已完成，本合同的签署人是乙方法定代表人或授权代表人。本合同生效后即对合同双方具有法律约束力。
              </p>
            </div>

            <h3 className={style.subt}>第七条 保密</h3>
            <div className="pt_item">
              <p className="b">
                甲乙双方保证对在讨论、签订、执行本协议过程中所获悉的属于对方的且无法自公开渠道获得的文件及资料（包括商业秘密、公司计划、运营活动、财务信息、技术信息、经营信息及其他商业秘密）予以保密。未经该资料和文件的原提供方同意，另一方不得向任何第三方泄露该商业秘密的全部或部分内容。但法律、法规另有规定或双方另有约定的除外。保密期限为
                3 年。
              </p>
            </div>

            <h3 className={style.subt}>第八条 通知</h3>
            <div className="pt_item">
              <p>
                8.1
                根据本合同需要一方向另一方发出的全部通知以及双方的文件往来及与本合同有关的通知和要求等，必须用书面形式，可采用
                _______
                （书信、传真、电报、当面送交等）方式传递。以上方式无法送达的，方可采取公告送达的方式。
              </p>
              <p>
                8.2 一方变更通讯地址，应自变更之日起 15
                日内，以书面形式通知对方；否则，由未通知方承担由此而引起的相关责任。
              </p>
            </div>

            <h3 className={style.subt}>第九条 合同的变更</h3>
            <div className="pt_item">
              <p className="b">
                本合同履行期间，发生特殊情况时，甲、乙任何一方需变更本合同的，要求变更一方应及时书面通知对方，征得对方同意后，双方在规定的时限内（书面通知发出
                15
                天内）签订书面变更协议，该协议将成为合同不可分割的部分。未经双方签署书面文件，任何一方无权变更本合同，否则，由此造成对方的经济损失，由责任方承担。
              </p>
            </div>

            <h3 className={style.subt}>第十条 合同权利义务的转让</h3>
            <div className="pt_item">
              <p className="b">
                除合同中另有规定外或经双方协商同意外，本合同所规定双方的任何权利和义务，在未经征得另一方书面同意之前，不得转让给第三者。任何转让，未经另一方书面明确同意，均属无效。
              </p>
            </div>

            <h3 className={style.subt}>第十一条 争议的处理</h3>
            <div className="pt_item">
              <p>11.1 本合同受中华人民共和国法律管辖并按其进行解释。</p>
              <p>
                11.2
                本合同在履行过程中发生的争议，由双方当事人协商解决，也可由有关部门调解；协商或调解不成的，依法向合同签订地人民法院起诉。
              </p>
            </div>

            <h3 className={style.subt}>第十二条 不可抗力</h3>
            <div className="pt_item">
              <p>
                本合同所称不可抗力是指受影响一方不能合理控制的，无法预料或即使可预料到也不可避免且无法克服，并于本合同签订日之后出现的，使该方对本合同全部或部分的履行在客观上成为不可能或不实际的任何事件。此等事件包括但不限于自然灾害如水灾、火灾、旱灾、台风、地震，以及社会事件如战争（不论曾否宣战）、动乱、罢工，政府行为或法律规定等。
              </p>
            </div>

            <h3 className={style.subt}>第十三条 合同的解释</h3>
            <div className="pt_item">
              <p>
                本合同的理解与解释应依据合同目的和文本原义进行，本合同的标题仅是为了阅读方便而设，不应影响本合同的解释
              </p>
            </div>

            <h3 className={style.subt}>第十四条 补充与附件</h3>
            <div className="pt_item">
              <p>
                本合同未尽事宜，依照有关法律、法规执行，法律、法规未作规定的，甲乙双方可以达成书面补充合同。本合同的附件和补充合同均为本合同不可分割的组成部分，与本合同具有同等的法律效力。
              </p>
            </div>

            <h3 className={style.subt}>第十五条 合同效力</h3>
            <div className="pt_item">
              <p>
                本合同自双方或双方法定代表人或其授权代表人签字并加盖单位公章或合同专用章之日起生效。本合同在
                ____广东___ 省 ___广州____ 市签订，有效期为 1 年
              </p>
            </div>
          </div>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default Form.create()(Apply);
